/**
 * SCSS 混入文件
 * 定义项目中常用的样式混入和工具函数
 */

@import './variables.scss';

// ==================== 布局混入 ====================

/**
 * Flex 布局混入
 * @param {string} $direction - flex-direction 值
 * @param {string} $justify - justify-content 值
 * @param {string} $align - align-items 值
 * @param {string} $wrap - flex-wrap 值
 */
@mixin flex-layout($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

/**
 * 绝对居中混入
 * @param {string} $type - 居中类型：horizontal, vertical, both
 */
@mixin absolute-center($type: both) {
  position: absolute;
  
  @if $type == horizontal {
    left: 50%;
    transform: translateX(-50%);
  } @else if $type == vertical {
    top: 50%;
    transform: translateY(-50%);
  } @else {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/**
 * Flex 居中混入
 */
@mixin flex-center {
  @include flex-layout(row, center, center);
}

/**
 * 清除浮动混入
 */
@mixin clearfix {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  
  &::after {
    clear: both;
  }
}

// ==================== 文本混入 ====================

/**
 * 文本省略混入
 * @param {number} $lines - 显示行数，1 为单行省略
 */
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }
}

/**
 * 文本不换行混入
 */
@mixin text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * 文本强制换行混入
 */
@mixin text-break {
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

/**
 * 隐藏文本混入（用于图标字体等）
 */
@mixin hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

// ==================== 视觉效果混入 ====================

/**
 * 阴影混入
 * @param {string} $type - 阴影类型：light, normal, dark, custom
 * @param {string} $shadow - 自定义阴影值（当 $type 为 custom 时使用）
 */
@mixin box-shadow($type: normal, $shadow: null) {
  @if $type == light {
    box-shadow: 0 1px 3px $shadow-color-light;
  } @else if $type == dark {
    box-shadow: 0 4px 12px $shadow-color-dark;
  } @else if $type == custom and $shadow {
    box-shadow: $shadow;
  } @else {
    box-shadow: 0 2px 8px $shadow-color;
  }
}

/**
 * 边框混入
 * @param {string} $position - 边框位置：all, top, right, bottom, left
 * @param {string} $color - 边框颜色
 * @param {string} $width - 边框宽度
 * @param {string} $style - 边框样式
 */
@mixin border($position: all, $color: $border-color, $width: $border-width-base, $style: solid) {
  @if $position == all {
    border: $width $style $color;
  } @else {
    border-#{$position}: $width $style $color;
  }
}

/**
 * 圆角混入
 * @param {string} $radius - 圆角大小
 * @param {string} $position - 圆角位置：all, top, right, bottom, left, top-left, top-right, bottom-left, bottom-right
 */
@mixin border-radius($radius: $border-radius-md, $position: all) {
  @if $position == all {
    border-radius: $radius;
  } @else if $position == top {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
  } @else if $position == right {
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  } @else if $position == bottom {
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  } @else if $position == left {
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
  } @else {
    border-#{$position}-radius: $radius;
  }
}

/**
 * 渐变背景混入
 * @param {string} $direction - 渐变方向
 * @param {list} $colors - 颜色列表
 */
@mixin gradient-background($direction: to right, $colors...) {
  background: linear-gradient($direction, $colors);
}

// ==================== 动画混入 ====================

/**
 * 过渡动画混入
 * @param {string} $property - 过渡属性
 * @param {string} $duration - 过渡时长
 * @param {string} $timing-function - 过渡函数
 * @param {string} $delay - 延迟时间
 */
@mixin transition($property: all, $duration: $animation-duration-base, $timing-function: ease, $delay: 0s) {
  transition: $property $duration $timing-function $delay;
}

/**
 * 变换混入
 * @param {string} $transforms - 变换函数
 */
@mixin transform($transforms...) {
  transform: $transforms;
}

/**
 * 动画混入
 * @param {string} $name - 动画名称
 * @param {string} $duration - 动画时长
 * @param {string} $timing-function - 动画函数
 * @param {string} $delay - 延迟时间
 * @param {string} $iteration-count - 重复次数
 * @param {string} $direction - 动画方向
 * @param {string} $fill-mode - 填充模式
 */
@mixin animation($name, $duration: $animation-duration-base, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: both) {
  animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode;
}

// ==================== 响应式混入 ====================

/**
 * 响应式断点混入
 * @param {string} $breakpoint - 断点名称
 * @param {string} $type - 类型：min, max, only
 */
@mixin respond-to($breakpoint, $type: min) {
  $breakpoint-value: null;
  
  @if $breakpoint == xs {
    $breakpoint-value: $breakpoint-xs;
  } @else if $breakpoint == sm {
    $breakpoint-value: $breakpoint-sm;
  } @else if $breakpoint == md {
    $breakpoint-value: $breakpoint-md;
  } @else if $breakpoint == lg {
    $breakpoint-value: $breakpoint-lg;
  } @else if $breakpoint == xl {
    $breakpoint-value: $breakpoint-xl;
  } @else if $breakpoint == xxl {
    $breakpoint-value: $breakpoint-xxl;
  }
  
  @if $type == min {
    @media (min-width: #{$breakpoint-value}) {
      @content;
    }
  } @else if $type == max {
    @media (max-width: #{$breakpoint-value - 1px}) {
      @content;
    }
  } @else if $type == only {
    @if $breakpoint == xs {
      @media (max-width: #{$breakpoint-sm - 1px}) {
        @content;
      }
    } @else if $breakpoint == sm {
      @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1px}) {
        @content;
      }
    } @else if $breakpoint == md {
      @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
        @content;
      }
    } @else if $breakpoint == lg {
      @media (min-width: #{$breakpoint-lg}) and (max-width: #{$breakpoint-xl - 1px}) {
        @content;
      }
    } @else if $breakpoint == xl {
      @media (min-width: #{$breakpoint-xl}) and (max-width: #{$breakpoint-xxl - 1px}) {
        @content;
      }
    } @else if $breakpoint == xxl {
      @media (min-width: #{$breakpoint-xxl}) {
        @content;
      }
    }
  }
}

/**
 * 移动端优先响应式混入
 */
@mixin mobile-first {
  @include respond-to(xs, max) {
    @content;
  }
}

/**
 * 桌面端优先响应式混入
 */
@mixin desktop-first {
  @include respond-to(md, min) {
    @content;
  }
}

// ==================== 组件混入 ====================

/**
 * 按钮基础样式混入
 */
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: $button-height-normal;
  margin: 0;
  padding: 0 15px;
  font-size: $font-size-md;
  line-height: 1.2;
  text-align: center;
  border-radius: $border-radius-md;
  cursor: pointer;
  transition: opacity $animation-duration-fast;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  
  &:active {
    opacity: 0.7;
  }
  
  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/**
 * 输入框基础样式混入
 */
@mixin input-base {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 $padding-md;
  color: $text-color;
  font-size: $font-size-md;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
  user-select: auto;
  -webkit-appearance: none;
  
  &::placeholder {
    color: $text-color-3;
    user-select: none;
  }
  
  &:disabled {
    color: $text-color-3;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: $text-color-3;
  }
  
  &:read-only {
    cursor: default;
  }
}

/**
 * 卡片基础样式混入
 */
@mixin card-base {
  position: relative;
  box-sizing: border-box;
  padding: $card-padding;
  color: $text-color;
  font-size: $font-size-md;
  background-color: $white;
  border-radius: $card-border-radius;
  @include box-shadow();
}

// ==================== 工具混入 ====================

/**
 * 隐藏元素混入
 * @param {string} $type - 隐藏类型：visibility, display, opacity
 */
@mixin hide($type: display) {
  @if $type == visibility {
    visibility: hidden;
  } @else if $type == opacity {
    opacity: 0;
  } @else {
    display: none;
  }
}

/**
 * 显示元素混入
 * @param {string} $type - 显示类型：block, inline, inline-block, flex
 */
@mixin show($type: block) {
  display: $type;
  visibility: visible;
  opacity: 1;
}

/**
 * 重置列表样式混入
 */
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * 重置按钮样式混入
 */
@mixin reset-button {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/**
 * 1px 边框混入（解决移动端 1px 边框问题）
 * @param {string} $color - 边框颜色
 * @param {string} $position - 边框位置：top, right, bottom, left, all
 * @param {number} $radius - 圆角大小
 */
@mixin hairline($color: $border-color, $position: all, $radius: 0) {
  position: relative;
  
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid $color;
    transform: scale(0.5);
    
    @if $position == all {
      border-width: 1px;
    } @else {
      border-#{$position}-width: 1px;
    }
    
    @if $radius != 0 {
      border-radius: $radius * 2;
    }
  }
}

/**
 * 安全区域混入（适配刘海屏等）
 * @param {string} $property - CSS 属性
 * @param {string} $direction - 方向：top, right, bottom, left
 * @param {string} $fallback - 降级值
 */
@mixin safe-area($property, $direction, $fallback: 0) {
  #{$property}: $fallback;
  #{$property}: constant(safe-area-inset-#{$direction});
  #{$property}: env(safe-area-inset-#{$direction});
}

/**
 * 滚动条样式混入
 * @param {string} $width - 滚动条宽度
 * @param {string} $track-color - 轨道颜色
 * @param {string} $thumb-color - 滑块颜色
 */
@mixin scrollbar($width: 6px, $track-color: $gray-2, $thumb-color: $gray-5) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}